<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线问答</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .container {
            width: 800px;
            height: 800px;
            margin: 0 auto;
            /* padding-left: 50px; */
            background-color: orange;
        }

        h1 {
            text-align: center;
            margin-bottom: 50px;
        }

        span {
            margin-left: 100px;
        }

        input {
            margin-top: 20px;
        }

        button {
            display: block;
            width: 150px;
            height: 50px;
            margin: 100px auto;
            background-color: red;
            border-radius: 10px;
            text-align: center;
        }
        .score{
            position: fixed;
            top: 45%;
            left: 45%;
            width: 300px;
            height: 200px;
            line-height: 50px;
            color: red;
            background-color: plum;
            text-align: center;
        }
        .prompt{
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.4);   
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h1>在线问答</h1>
            <h3>1.《水浒传》的作者是谁？(单选) <span>你选择的结果是:{{first}}</span></h3>
            <input type="radio" id="A" value="A" v-model="first">
            <label for="A">A、吴承恩</label><br>
            <input type="radio" id="B" value="B" v-model="first">
            <label for="B">B、罗贯中</label><br>
            <input type="radio" id="C" value="C" v-model="first">
            <label for="C">C、施耐庵</label><br>
            <input type="radio" id="D" value="D" v-model="first">
            <label for="D">D、曹雪芹</label><br>
            <h3>2.钱老师的特点有几个？(多选) <span>你选择的结果是:{{second.toString()}}</span></h3>
            <input type="checkbox" id="A1" value="A" v-model="second">
            <label for="A1"> A、帅的一逼</label><br>
            <input type="checkbox" id="B1" value="B" v-model="second">
            <label for="B1"> B、高冷</label><br>
            <input type="checkbox" id="C1" value="C" v-model="second">
            <label for="C1"> C、发型不错</label><br>
            <input type="checkbox" id="D1" value="D" v-model="second">
            <label for="D1"> D、丑</label><br>

            <button @click="submit">提交按钮</button>
            <div class="prompt" v-show="show">
                <div class="score">
                    <h1>你最后的得分是{{score}}</h1> 
                    <input type="submit" value="确认" @click="btnClick">
                </div>
            </div>
        </div>
    </div>
    <script>

        /* 
            2.在线问答
            1.《水浒传》的作者是谁？（单选，正确答案C）4
            A、吴承恩
            B、罗贯中
            C、施耐庵
            D、曹雪芹

            2.钱老师的特点有几个？（多选A,B,C）4
            A、帅的一逼
            B、高冷
            C、发型不错
            D、丑

            每题4分，答错不得分，答对一部分就得一半分
        */
        var app = new Vue({
            el: "#app",
            data: {
                msg: "",
                first: "",
                second: [],
                score:0,
                show:false,
            },
            methods: {
                submit() {
                    this.show=true;
                    if (this.first == 'C') {
                        this.score = 4;
                    }
                    if (!this.second.includes('D')) {
                        if(this.second.includes('A')&&this.second.includes('B')&&this.second.includes('C')){
                            this.score+=4;
                        }else if(this.second.length>0){
                            this.score+=2;
                        }
                    }

                },
                btnClick(){
                    this.show=false;
                    this.score=0;
                }

            },


        });
    </script>
</body>

</html>